@mixin button-color($color, $color-invert) {
  background-color: $color;
  border-color: transparent;
  color: $color-invert;
  &:hover,
  &.is-hovered {
    // background-color: #f00;
    background-color: darken($color, 5%);
    // background-color: darken($color, 2.5%);
    border-color: transparent;
    color: $color-invert;
  }
  &:focus,
  &.is-focused {
    border-color: transparent;
    color: $color-invert;
    &:not(:active) {
      box-shadow: $button-focus-box-shadow-size rgba($color, 0.25);
    }
  }
  &:active,
  &.is-active {
    background-color: darken($color, 5%);
    border-color: transparent;
    color: $color-invert;
  }
  &[disabled],
  fieldset[disabled] & {
    background-color: $color;
    border-color: transparent;
    box-shadow: none;
  }

  &.is-outlined {
    background-color: transparent;
    border-color: $color;
    color: $color;
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
      background-color: $color;
      border-color: $color;
      color: $color-invert;
    }
    &[disabled],
    fieldset[disabled] & {
      background-color: transparent;
      border-color: $color;
      box-shadow: none;
      color: $color;
    }
  }
  &.is-inverted.is-outlined {
    background-color: transparent;
    border-color: $color-invert;
    color: $color-invert;
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
      background-color: $color-invert;
      color: $color;
    }
    &[disabled],
    fieldset[disabled] & {
      background-color: transparent;
      border-color: $color-invert;
      box-shadow: none;
      color: $color-invert;
    }
  }
}
